<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { FormRules, FormInstance, ElMessage } from 'element-plus';
import { UserAPI } from '@/api';
import { useAuthStore } from '@/store';

const router = useRouter();
const formRef = ref<FormInstance | null>(null);
const model = reactive<HttpPayload.Login>({ user_name: "", user_pwd: "" });
//定制表单校验规则
const rules: FormRules = {
    user_name: [
        { required: true, message: '*用户名不能为空', trigger: "blur" },
        { min: 3, max: 20, message: '*用户名长度3 - 20', trigger: "blur" }
    ],
    user_pwd: [
        { required: true, message: '*密码不能为空', trigger: "blur" },
        { min: 3, max: 20, message: '*密码长度3 - 20', trigger: "blur" }
    ],
};

const login = async () => {
    try {
        //验证表单信息
        await formRef.value?.validate();
        //发送Ajax
        const token = await UserAPI.login(model);
        //将token和user_name存入pinia
        const authStore = useAuthStore();
        authStore.login(model.user_name, token);
        //提示用户（过一会自动消失）
        ElMessage({
            type: "success",
            showClose: true,
            message: `${model.user_name}~ 欢迎登录山农教务管理系统！`,
            customClass: "messageIndex"
        });
        //成功跳转页面
        router.replace("/home");
    } catch (e) { console.log(e) }
};
</script>

<template>
    <div class="big">
        <el-form ref="formRef" :model="model" :rules="rules" status-icon>
            <el-form-item>
                <h1>- 欢迎登录教务管理系统 -</h1>
            </el-form-item>
            <el-form-item prop="user_name">
                <el-input size="large" placeholder="请输入用户名..." v-model.trim="model.user_name">
                    <template #prepend><span class="input-tip">用户id：</span></template>
                    <template #append>
                        <el-icon>
                            <User />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="user_pwd">
                <el-input size="large" placeholder="请输入密码..." v-model="model.user_pwd" type="password">
                    <template #prepend><span class="input-tip">密码：</span></template>
                    <template #append>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="large" type="primary" @click="login">登录系统</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
.big {
    width: 100%;
    height: 100%;
    background-image: url(../assets/images/bgc22.webp);
    background-size: cover;
}

.el-form {
    background-color: rgba(255, 255, 255, 0.6);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    padding: 20px 50px;
    box-sizing: border-box;
}

h1 {
    font-size: 24px;
    margin: 0 auto;
    font-weight: 500;
}

.input-tip {
    width: 50px;
}

.el-button {
    margin-left: 90px;
}
</style>